<template>
  <div>
    <!-- 
        1、vue的单文件组件中要引入图片，引入的图片有三种情况
src-01-引入assets图片        1）网络图片
        2) public文件中：不会被webpack压缩或者转换，直接使用/进行访问
        3）src/assets文件夹：这里存放css,font字体，图片，这里边的资源会被webpack编译压缩转换
        2、导入assets文件夹中的图片有三种方式
        1）base64方式
        2) ES6的导入方式引入
        3）CommonsJS的导入方式引入
     -->
     <img :src="avatarUrl" alt="" style="width:150px"><br>
     <img :src="publicImg" alt=""><br>
     <img :src="assetsImg1" alt=""><br>
     <img :src="assetsImg2" alt=""><br>
     <img :src="assetsImg3" alt="">
  </div>
</template>

<script>
import bg8 from './assets/images/bg8.jpg'
export default {
    data(){
        return{
            avatarUrl:'https://img0.baidu.com/it/u=1211950010,4045750816&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500',
            publicImg:'/cat_1.png',
            assetsImg2:bg8,
            assetsImg3:require('./assets/images/hot11.jpg'),
            assetsImg1:""
        }
    }
}
</script>

<style>

</style>